<!--
 * @Description
 * @Author hanl
 * @Date 2024-03-11 16:50:22
 * @LastEditors hanl
 * @LastEditTime 2024-03-12 17:52:15
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>loading</title>
    <style>
      :root {
        --loading: #623bff;
      }

      .first-loading-wrp {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90vh;
        min-height: 90vh;
      }

      @keyframes loading__scale-to-up {
        from {
          transform: scale(1, 1);
          background-color: color-mix(in srgb, var(--loading), #e34d59);
        }
        to {
          transform: scale(1, 0.2);
          background-color: var(--loading);
        }
      }

      .first-loading-wrp .loading-wrp i {
        background-color: var(--loading);
        display: inline-block;
        width: 5px;
        height: 50px;
        border-radius: 5px;
      }

      .splash__item + .splash__item {
        margin-left: 10px;
      }

      .first-loading-wrp .loading-wrp .splash__item {
        animation: loading__scale-to-up 0.5s linear infinite alternate-reverse;
        animation-delay: calc(var(--i) + 0s);
      }
    </style>
  </head>
  <body>
    <div class="first-loading-wrp">
      <div class="loading-wrp">
        <i class="splash__item" style="--i: 0.1s"></i>
        <i class="splash__item" style="--i: 0.2s"></i>
        <i class="splash__item" style="--i: 0.3s"></i>
        <i class="splash__item" style="--i: 0.4s"></i>
        <i class="splash__item" style="--i: 0.5s"></i>
        <i class="splash__item" style="--i: 0.6s"></i>
        <i class="splash__item" style="--i: 0.7s"></i>
        <i class="splash__item" style="--i: 0.8s"></i>
      </div>
    </div>
  </body>
</html>
